import React, { useCallback, useState } from 'react'
import {
  View, Text, Swiper, SwiperItem, Image
} from '@tarojs/components'
import Navigate from '@NAVIGATION/navigateManager'
import DBConfig from '@CONFIG/DBConfig'
import Images from '@ASSET/Images'
import i18n from '@I18N'
import { getPlatform } from '@UTILS/common'
import style from './ConsultationCarousel.module.scss'

const { isWeb } = getPlatform()

const ConsultationCarousel = ({ language, myConsultationsWithTotal }) => {
  const { Consultations } = myConsultationsWithTotal || {}
  const [curIndex, setCurIndex] = useState(0)
  const onChange = useCallback(
    e => {
      setCurIndex(e.detail.current)
    },
    []
  )

  const onWebClick = useCallback(
    () => {
      const curConsultation = Consultations[curIndex]
      const { Doctor: { DisplayName } = {}, p8Id } = curConsultation || {}
      if (isWeb) {
        Navigate.chatRoomPage({
          ConsultationId: p8Id,
          title: DisplayName?.[language]
        })
      }
    },
    [curIndex, Consultations, language],
  )

  if (!Consultations?.length) return null

  return (
    <View className={style.container}>
      <View onClick={onWebClick}>
        <Swiper
          autoplay
          interval={3000}
          vertical
          circular={Consultations?.length > 1}
          onChange={onChange}
          className={style.swipeContainer}
        >
          {Array.isArray(Consultations) && Consultations.map(item => (
            <ConsultationItem language={language} key={item.p8Id} data={item} />
          ))}
        </Swiper>
      </View>
    </View>
  )
}

const ConsultationItem = ({ data, language }) => {
  const { UnReadMessagCount, p8Id, Doctor } = data || {}
  const { DisplayName, AvatarFileName, AvatarVersion } = Doctor || {}
  const src = AvatarVersion
    ? `${DBConfig.staticDoctorAvatarUrl}${AvatarFileName}?t=${AvatarVersion}`
    : Images.avatar
  const onClickItem = useCallback(
    () => {
      if (isWeb) return
      Navigate.chatRoomPage({
        ConsultationId: p8Id,
        title: DisplayName?.[language]
      })
    },
    [p8Id, DisplayName, language],
  )

  return (
    <SwiperItem onClick={onClickItem}>
      <View className={style.consultationItem}>
        <View className={style.content}>
          <Image className={style.avatar} src={src} />
          <View className={style.rightContainer}>
            <View className={style.doctorInfoView}>
              <View className={style.doctorInfo}>
                <Text className={style.doctorName}>{`${DisplayName?.[language]}${i18n.common.doctor()}`}</Text>
              </View>
              <Text className={style.consulting}>正在咨询中</Text>
            </View>
            <View className={style.viewContainer}>
              <Text className={style.viewMessageText}>查看消息</Text>
              {!!UnReadMessagCount && <Text className={style.messageCount}>{UnReadMessagCount}</Text>}
            </View>
          </View>
        </View>
      </View>
    </SwiperItem>
  )
}

export default ConsultationCarousel
